<template>
    <el-container>
        <div class="c2">
            <el-row :gutter="20">

                    <div class="c1">
                        <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-plus"
                                @click="addNotice"
                        >发布公告</el-button
                        >
                        &#12288;&#12288;
                        <el-form
                                :inline="true"
                                :model="searchData"
                                class="demo-form-inline s1"
                        >
                            <el-form-item>
                                <el-input
                                        class="search_inp"
                                        v-model="searchData.noticeName"
                                        placeholder="输入'公告标题'查询"
                                ></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="success"
                                        icon="el-icon-search"
                                        @click="searchBtn(searchData)"
                                >查询</el-button
                                >
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="warning"
                                        icon="el-icon-refresh-left"
                                        @click="searchrestBtn(searchData)"
                                >重置</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>

                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            max-height="400"
                            align="center"
                            stripe
                            v-loading="loading"
                    >
                        <el-table-column type="index" width="50" label="序号">
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="noticeName" label="公告标题" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="noticeIntro" label="公告简介" width="100" align="center">
                        </el-table-column>
                        <!--<el-table-column prop="noticeContent" label="公告内容" width="200" align="center">-->
                            <!--&lt;!&ndash;<template slot-scope="prop">&ndash;&gt;-->
                                <!--&lt;!&ndash;<el-input&ndash;&gt;-->
                                        <!--&lt;!&ndash;type="textarea"&ndash;&gt;-->
                                        <!--&lt;!&ndash;:rows="2"&ndash;&gt;-->
                                        <!--&lt;!&ndash;:disabled="true"&ndash;&gt;-->
                                        <!--&lt;!&ndash;placeholder="请输入内容"&ndash;&gt;-->
                                        <!--&lt;!&ndash;v-model="prop.row.noticeContent">&ndash;&gt;-->
                                    <!--&lt;!&ndash;:autosize="{ minRows: 1, maxRows: 5}"&ndash;&gt;-->
                                <!--&lt;!&ndash;</el-input>&ndash;&gt;-->
                            <!--&lt;!&ndash;</template>&ndash;&gt;-->
                        <!--</el-table-column>-->
                        <el-table-column prop="releaseTime" label="发布时间" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="createPerson" label="发布人" width="100" align="center">
                        </el-table-column>
                        <el-table-column  label="详情">
                            <template v-slot="prop">
                                <el-button size="mini" type="success" icon="el-icon-check" circle @click="getNoticeOne(prop.row.id)"></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column width="180" label="操作">
                            <template v-slot="prop">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        icon="el-icon-edit"
                                        @click="updateNotice(prop.row.id)"
                                ></el-button>
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        size="mini"
                                        @click="handleDeleteNotice(prop.row.id)"
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageCon">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="this.pageNum.currentPage"
                                :page-sizes="[8, 6, 4, 2]"
                                :page-size="this.pageNum.perPage_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="this.pageNum.total"
                        >
                        </el-pagination>
                    </div>
                <!--<div id="toolbar-container"></div>-->
                <!--编辑器容器-->
                <!--<div id="editor">-->
                    <!--<p>This is the initial editor content.</p>-->
                <!--</div>-->
            </el-row>

        </div>


        <!-- 公告详细信息 -->
        <el-dialog
                title=""
                :visible.sync="noticeDialogVisible"
                width="50%"
        >

            <el-card class="box-card-2" >
                <div slot="header" class="clearfix">
                    <div ><h5>{{notice.noticeName}}</h5></div>
                    <!--<el-button style="float: right; padding: 3px 0" type="text" @click="closeCard">操作按钮</el-button>-->
                </div>

                    <div align="left"><lable>公告简介：</lable>{{notice.noticeIntro}}</div>
                    <div align="left"><lable>公告内容：</lable></div>
                    <div align="left" v-html="notice.noticeContent"></div>
                    <div align="right"><lable>发布时间：</lable><h1>{{notice.releaseTime}}</h1></div>
                    <div align="right"><lable>发布人：&#12288;</lable><h1>{{notice.createPerson}}&#12288;&#12288;</h1></div>

            </el-card>
            <span slot="footer" class="dialog-footer">
      </span>
        </el-dialog>

        <!-- 删除 -->
        <el-dialog title="提示" :visible.sync="deluserDialogVisible" width="30%">
            确认删除吗?
            <span slot="footer" class="dialog-footer">
        <el-button @click="deluserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deluserDialog">确 定</el-button>
      </span>
        </el-dialog>

        <!-- 删除公告信息 -->
        <el-dialog title="提示" :visible.sync="delNoticeDialogVisible" width="30%">
            确认删除吗?
            <span slot="footer" class="dialog-footer">
        <el-button @click="delNoticeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delnoticeDialog">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog
                title="用户修改"
                :visible.sync="edituserDialogVisible"
                width="50%"
        >
            <el-form
                    class="editform"
                    ref="ruleForm2"
                    :rules="rules"
                    label-position="left"
                    label-width="80px"
                    :model="usersForm"
            >
                <el-form-item label="用户名" prop="userName">
                    <el-input
                            v-model="usersForm.userName"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="usersForm.phone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="usersForm.email" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label="角色" prop="roleIds">
                    <el-select multiple v-model="editDate1.roleIds" placeholder="请选择">
                        <el-option
                                v-for="item in tableData1"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="deptList">
                    <el-select v-model="editDate1.deptList" multiple placeholder="请选择">
                        <el-option
                                v-for="item in depts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="edituserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserDialog">确 定</el-button>
      </span>
        </el-dialog>
    </el-container>
</template>

<script>
    import axios from "../../utils/axios";
    import md5 from "js-md5";
    import { getDepts, roleList,getDeptsList,getNoticeById } from "../../utils/api";
    import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'

    // import Treeselect from "@riophae/vue-treeselect";

    // import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        //  components: { Treeselect },
        // watch: {

        //     },

        methods: {
            //部门树
            deptsTree() {
                let parms ={}
                parms.deptName= this.deptName2;
                parms.isAll=true;
                getDepts(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门查询
            deptsTree2() {
                let parms ={}
                parms.name= this.deptName2;
                parms.size=-1

                getDeptsList(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门树点击
            handleNodeClick() {
                console.log(1);
            },
            //用户列表
            getUserList(con) {
                axios({
                    method: "GET",
                    url: "/sys/user",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //获取公告信息
            getNoticeList(con) {
                axios({
                    method: "GET",
                    url: "/notice/queryNoticeMessage",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //用户状态
            changeSwitch(con1, con2) {
                let data = {};
                data.id = con2;
                data.status = con1;
                if (con1 == 1) {
                    let data = {};
                    data.id = con2;
                    data.status = con1;

                    this.$confirm("此操作将启用该角色", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            axios({
                                method: "PUT",
                                url: "/sys/user",
                                data: data,
                            }).then((res) => {
                                if (res.code == 200) {
                                    this.$message.success("启用成功");
                                    this.edituserDialogVisible = false;
                                    this.getUserList(this.pageNum);
                                } else {
                                    this.getUserList(this.pageNum);
                                    this.$message.error(res.message);
                                }
                            });
                        })
                        .catch(() => {
                            this.getUserList(this.pageNum);
                        });
                }
                if (con1 == 0) {
                    let data = {};
                    data.id = con2;
                    data.status = con1;

                    this.$confirm("此操作将禁用该角色", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            axios({
                                method: "PUT",
                                url: "/sys/user",
                                data: data,
                            }).then((res) => {
                                if (res.code == 200) {
                                    this.$message.success("禁用成功");
                                    this.edituserDialogVisible = false;
                                    this.getUserList(this.pageNum);
                                } else {
                                    this.getUserList(this.pageNum);
                                    this.$message.error(res.message);
                                }
                            });
                        })
                        .catch(() => {
                            this.getUserList(this.pageNum);
                        });
                }
            },
            //页码
            handleSizeChange(val) {
                this.pageNum.size = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getNoticeList(this.searchData);
                } else {
                    this.getNoticeList();
                }
            },
            handleCurrentChange(val) {
                this.pageNum.current = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getNoticeList(this.searchData);
                } else {
                    this.getNoticeList();
                }
            },
            //添加
            adduser() {
                this.adduserDialogVisible = true;
                roleList({ size: -1 }).then((res) => {
                    console.log(res);
                    this.roles = res.data.records;
                });
                this.searchrestBtn();
            },

            //添加公告信息
            addNotice() {
                this.$router.push("notice-submit");
                // alert(this.editor.getData());
                // this.addData.noticeContent= this.editor.getData();
                // this.initCKEditor();
                // this.addNoticeDialogVisible = true;
                // this.initCKEditor();
                // this.addData.noticeContent= this.editor.getData();
                // this.searchrestBtn();
            },
            //修改公告信息

              updateNotice(con) {
                getNoticeById({ id:con }).then((res) => {
                    console.log(res);
                    this.updateDate = res.data;

                    alert(this.updateDate.noticeName+"sdad");
                    // let update =JSON.stringify(this.updateDate);
                    this.$router.push({
                        path:'update-notice',
                        query: {obj:{id: this.updateDate.id}} // 将对象转成json字符串
                    });
                });

            },
            addNo() {
                this.adduserDialogVisible = false;
                this.$refs.ruleForm.resetFields();
            },
            adduserDialog() {
                let obj = Object.assign({}, this.addData)
                obj.password = md5(obj.password);
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/sys/user",
                            data: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("添加成功");
                                this.adduserDialogVisible = false;
                                this.getUserList(this.pageNum);
                                this.$refs.ruleForm.resetFields();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },

            //查询
            searchBtn(con) {
                this.getNoticeList(con);
                this.searchToggle = true;
            },
            //导出
            download() {
                this.downloadLoading = true;
            },
            //重置
            searchrestBtn() {
                this.searchData.noticeName = "";
                this.getNoticeList();
                this.searchToggle = false;
            },
            //删除
            handleDelete(con) {
                this.deluserDialogVisible = true;

                this.delDate = [];
                this.delDate.push(con);
            },
            //删除公告信息
            handleDeleteNotice(con) {
                this.delNoticeDialogVisible = true;
                this.delDate = [];
                this.delDate.push(con);
            },
            deluserDialog() {
                axios({
                    method: "delete",
                    url: "/sys/user",

                    data: JSON.stringify(this.delDate),
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.deluserDialogVisible = false;
                        this.getUserList(this.pageNum);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //删除公告信息
            delnoticeDialog() {
                axios({
                    method: "delete",
                    url: "/notice/delete",
                    data: JSON.stringify(this.delDate),
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.delNoticeDialogVisible = false;
                        this.getNoticeList(this.pageNum);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            deluserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //角色查询
            getRoleList() {
                axios({
                    method: "GET",
                    url: "/sys/role",
                    params: { size: -1 },
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData1 = res.data.records;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //修改
            handleEdit(con) {
                this.edituserDialogVisible = true;
                this.usersForm.userName = con.userName;
                this.usersForm.loginName = con.loginName;
                this.usersForm.password = con.password;
                this.usersForm.phone = con.phone;
                this.usersForm.email = con.email;
                this.usersForm.id = con.id;
                this.editDate1.userId = con.id;
            },
            //关闭卡片
            closeCard(){
                this.noticeDialogVisible= false;
            },
            edituserDialog() {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "PUT",
                            url: "/sys/user",
                            data: this.usersForm,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.edituserDialogVisible = false;
                                this.getUserList(this.pageNum);
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },
            //重置用户角色关联
            restUserRoles() {
                let data = {}
                data.roleIds=this.editDate1.roleIds
                data.userId=this.editDate1.userId
                axios({
                    method: "POST",
                    url: "/sys/role/reset",
                    data: data,
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("角色重置成功");

                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            edituserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //初始化ckeditor5富文本编辑器
            initCKEditor() {

                CKEditor.create(document.querySelector('#editor'), {
                    ckfinder: {
                        uploadUrl: '/admin/Upload/uploadUrl'
                        //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                    }
                }).then(editor => {
                    const toolbarContainer = document.querySelector('#toolbar-container');
                    toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                    this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
                    this.editor.setData("asd");

                }).catch(error => {
                    console.error(error);
                });
            },
            //查看单条公告信息
            getNoticeOne(con) {

                this.noticeDialogVisible=true;
                getNoticeById({ id:con }).then((res) => {
                    console.log(res);
                    this.notice = res.data;

                    // this.notice.noticeName;
                });
                // this.searchrestBtn();
            },

            //重置密码
            restPassword(con) {
                this.$confirm("此操作将重置密码, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let obj = {};
                        obj.id = con;
                        axios({
                            method: "GET",
                            url: "/sys/user/restPassword",
                            params: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("重置成功");
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
        },
        data() {
            return {
                notice:{
                    noticeName:"",
                    noticeIntro:"",
                    noticeContent:"",
                    releaseTime:"",
                    createBy:"",
                    createPerson:"",
                },
                updateDate:{
                    id:"",
                    noticeName:"",
                    noticeIntro:"",
                    noticeContent:"",
                    releaseTime:"",
                    createBy:"",
                    createPerson:"",
                },
                editor:null,//编辑器实例
                editordata: "",  //编辑器数据
                pageNum: {
                    current: 1,
                    size: 10,
                    total: 0,
                },
                icons: "",
                noticeDialogVisible:false,
                adduserDialogVisible: false,
                addNoticeDialogVisible: false,
                deluserDialogVisible: false,
                delNoticeDialogVisible: false,
                edituserDialogVisible: false,
                innerVisible: false,
                searchToggle: true,
                loading: true,
                downloadLoading: false,
                delDate: [],

                searchData: {
                    noticeName: "",
                },
                usersForm: {
                    email: "",
                    loginName: "",
                    password: "",
                    phone: "",
                    photo: "",
                    status: 0,
                    userName: "",
                },
                tableData: [],
                tableData1: [],
                depts: [],


                roles: [],

                deptName: {},
                deptName2: '',

                defaultProps: {
                    children: "children",
                    label: "name",
                },

                editDate1: {
                    roleIds: [],
                    userId: "",
                },
                // parentList: [],
                addData: {
                    noticeName: "",
                    noticeIntro: "",
                    noticeContent: "",
                    releaseTime:"",
                    createPerson:"",
                },
                rules: {
                    loginName: [{ required: true, message: "必填", trigger: "blur" }],
                    password: [{ required: true, message: "必填", trigger: "blur" }],
                    userName: [{ required: true, message: "必填", trigger: "blur" }],
                    email: [{ message: "邮箱格式错误", trigger: ["blur", "change"], pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/ }],
                    phone: [
                        {
                            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                            message: "手机号格式错误",
                            trigger: ["blur", "change"],
                        },
                    ],
                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
                rules4: {
                    noticeName:[{ required: true, message: "必填", trigger: "blur" }],
                    noticeIntro:[{ required: true, message: "必填", trigger: "blur" }],
                    noticeContent: [{ required: true, message: "必填", trigger: "blur" }],
                    releaseTime: [{ required: true, message: "必填", trigger: "blur" }],
                    createPerson: [{ required: true, message: "必填", trigger: "blur" }],
                },
                rules3: {
                    roleIds: [{ required: true, message: "必填", trigger: "blur" }],

                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
            };
        },
        filters: {
            ellipsis(value, len) {
                if (!value) return
                if (value.length > len) {
                    return value.slice(0, len) + '...'
                }
                return value
            }
        },
        //初始化编辑器
        mounted() {
            this.initCKEditor()

        },
        created() {
            this.getNoticeList();
            this.initCKEditor();
        },
    };
</script>

<style lang="less" scoped>
    .el-container {
        display: flex;
        justify-content: start;
        flex-direction: column;
        align-items: center;
    }
    .el-card {
        width: 100%;
    }
    .el-footer {
        align-self: start;
        margin-top: 1.5rem;
    }
    .c1 {
        display: flex;
        justify-content: start;
        margin-bottom: 1.5rem;
        width: 100%;
        .dBtn {
            margin-right: 1rem;
        }
    }
    .el-dialog {
        display: flex;
        justify-content: flex-start;
    }
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .s1 {
        height: 0;
        margin-top: 2.5rem;
        display: flex;
        align-items: center;
    }

    .editform {
        /*display: flex;*/
        /*justify-content: start;*/
        /*flex-wrap: wrap;*/
        /*text-align: left;*/
        /*.el-input /deep/.el-input__inner {*/
            /*height: 3.05rem;*/
            /*font-size: 12px !important;*/
        /*}*/
    }
    .el-input /deep/.el-input__inner {
        height: 3.05rem;
        font-size: 12px !important;
    }
    .editform /deep/ .el-form-item {
        display: inline-block;
        margin-left: 1rem;

        width: 48%;
    }
    .el-input /deep/ .el-input__icon {
        height: 100%;
        width: 25px;
        text-align: center;
        transition: all 0.3s;
        line-height: 3.05rem;
    }
    .pageCon {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-top: 1.3rem;
    }
    .el-table /deep/ {
        font-size: 12px;
    }
    .el-switch /deep/ .el-switch__label * {
        font-size: 12px;
    }
    .el-table /deep/ thead {
        font-size: 12.5px;
        color: #909399;
        font-weight: 700;
    }
    .depttree {
        margin-top: 20px;
        font-size: 14px;
    }
    .el-dialog /deep/ .el-dialog__header {
        padding: 20px 20px 10px;
        text-align: left !important;
    }

    box-card-2{
           height:100%;
            width: 100%;
    }
</style>